<template>
  <div class="community">
    <Header />
    <!-- 正文全部内容 -->
    <div class="alltext">
      <!-- 左边全部内容 -->
      <div class="left">
        <!-- 图片banner -->
        <div class="imgbanner">
          <img src="@/assets/images/community1.jpg" alt="" />
        </div>
        <!-- 左边列表 -->
        <div class="main">
          <div class="nav">
            <ul>
              <li>
                <a
                  v-for="(item1, index) in tabList"
                  :key="index"
                  :style="{ color: index == 0 ? '#ff6633' : '' }"
                  @click="communityListClick(item1, index)"
                >
                  {{ item1.label }}
                </a>
              </li>
            </ul>
          </div>

          <div
            class="concern content"
            v-for="(item, index) in tieziList"
            :key="index"
            @click="communityItemClick(item, index)"
          >
            <div class="concern_text">
              <div class="concern_biaoti">
                <h3>
                  {{ item.title }}
                </h3>
              </div>
              <div class="concern_zhengwen">
                <p>
                  {{ item.digest }}
                </p>
              </div>
              <div class="concern_time">
                <sapn style="margin-right: 20px">老师</sapn>
                <span>{{ item?.updateTime }}</span>
              </div>
            </div>
            <div class="concern_image">
              <div class="img_box">
                <img :src="QNURL + item.cover" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边全部内容 -->
      <div class="right">
        <!-- 右边创作中心内容 -->
        <div class="right_create">
          <div class="first1">
            <img src="@/assets/images/创作中心.png" alt="" />
            <p>创作中心</p>
          </div>
          <div class="second1">
            <div class="second1_list" @click="publishHandel">
              <img src="@/assets/images/发帖.png" alt="" />
              <!-- <p>发帖</p> -->
              <span> 发帖 </span>
            </div>
            <div class="second1_list">
              <img src="@/assets/images/回帖.png" alt="" />
              <span>回帖</span>
            </div>
          </div>
        </div>
        <!-- 右边推荐内容 -->
        <div class="right_push">
          <div class="first1">
            <img src="@/assets/images/推荐关注.png" alt="" />
            <p>推荐关注</p>
          </div>
          <div class="userall">
            <div class="user">
              <div class="userhead">
                <img src="@/assets/images/头像1.png" alt="" />
              </div>
              <div class="username">
                <p>老师一号</p>
                <p>初级教育</p>
              </div>
            </div>
            <div class="user">
              <div class="userhead">
                <img src="@/assets/images/头像2.png" alt="" />
              </div>
              <div class="username">
                <p>老师二号</p>
                <p>推荐教师</p>
              </div>
            </div>
            <div class="user">
              <div class="userhead">
                <img src="@/assets/images/头像3.png" alt="" />
              </div>
              <div class="username">
                <p>老师三号</p>
                <p>高级教育</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <RightBottomNav />
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/header/Header.vue";
import { getAllArticle } from "@/api/community/index";
import { onMounted, ref } from "vue";
import { QNURL } from "@/config/urlConfig";
import { useRouter } from "vue-router";
import RightBottomNav from "@/components/right-bottom-nav/RightBottomNav.vue";
import { useCommonStore } from "@/store/modules/common";

const commonStore = useCommonStore();

const router = useRouter();

function communityListClick(item1: any, index: any) {
  console.log(item1, index);
}

function communityItemClick(item: any, index: any) {
  console.log(item, index);
  router.push({
    path: "/communityDetail",
    query: {
      articleId: item.id
    }
  });
  commonStore.SET_CURRENT_NAV_INDEX(99);
}

// import { ref } from "vue";

const tabList = [
  {
    label: "推荐",
    id: "introduce"
  },
  {
    label: "热榜",
    id: "hot"
  },
  {
    label: "关注",
    id: "concern"
  }
];

const tieziList = ref<any>([]);

async function getAllArticleFun() {
  const res = await getAllArticle({ pageSize: 999 });
  console.log(res);
  tieziList.value = res.data.records;
}

function publishHandel() {
  const href = router.resolve({
    path: "/publish",
    query: { type: 0 }
  });
  window.open(href.href, "_blank");
}

onMounted(() => {
  getAllArticleFun();
});
</script>

<style lang="scss" scoped>
.community {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-color);

  .alltext {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    .imgbanner {
      margin: 20px 0;
      width: 890px;
      img {
        width: 890px;
        height: 150px;
        border-radius: 10px;
      }
    }
    .main {
      width: 890px;

      .nav {
        width: 100%;
        height: 30px;
        border-bottom: 1px solid rgb(223, 219, 219);
        ul li {
          list-style: none;
          display: flex;
          margin-bottom: 10px;
          margin-top: 5px;
          a {
            text-decoration: none;
            color: rgb(0, 0, 0);
            font-size: 20px;
            margin-left: 15px;
          }
          a:hover {
            color: rgb(245, 123, 9);
          }
        }
      }

      .concern {
        width: 100%;
        height: 200px;
        display: flex;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
        // margin-bottom: 5px;
        cursor: pointer; //鼠标移入变成手

        img {
          transition: all 0.3s;
        }

        &:hover {
          img {
            transform: scale(1.1);
          }
        }

        .concern_text {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          // align-items: flex-start;
          padding: 20px 10px;
          .concern_biaoti {
            margin-bottom: 10px;
            font-size: 18px;
          }
          .concern_zhengwen {
            width: 100%;
            line-height: 20px;
            // flex: 1;
            // height: 42px;
            p {
              display: -webkit-box;

              height: 80px;
              line-height: 25px;
              color: #000;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 3; /* 控制显示的行数 */
              // white-space: nowrap;
              -webkit-box-orient: vertical;
            }
          }
          .concern_time {
            color: rgb(130, 131, 131);
            margin-top: 10px;
            flex: 1;
          }
        }
        .concern_image {
          width: 350px;
          height: 100%;
          border-radius: 15px;
          padding: 20px 20px;

          .img_box {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .right {
      margin: 20px 0 20px 20px;
      width: 280px;
      .right_create {
        .first1 {
          display: flex;
          width: 280px;
          height: 50px;
          // padding-bottom: 10px;
          background-color: #ffffff;
          border-radius: 10px 10px 0px 0px;
          img {
            width: 50px;
            height: 100%;
          }
          p {
            height: 100%;
            display: inline-block;
            line-height: 50px;
          }
        }
        .second1 {
          display: flex;
          background-color: rgb(239, 239, 239);
          border-radius: 0 0 10px 10px;
          box-shadow: 0px 2px 2px 0px #dedfe0;
          border-radius: 0px 0px 10px 10px;
          .second1_list {
            width: 55px;
            margin: 8px;
            text-align: center;
            cursor: pointer;

            &:hover {
              color: var(--orange-color);
            }
            img {
              width: 100%;
              height: 55px;
            }

            .dialog-footer button:first-child {
              margin-right: 10px;
            }
          }
        }
      }
      .right_push {
        margin-top: 25px;
        .first1 {
          display: flex;
          width: 280px;
          height: 50px;
          // padding-bottom: 10px;
          background-color: #ffffff;
          border-radius: 10px 10px 0px 0px;
          p {
            line-height: 50px;
          }
          img {
            width: 50px;
            height: 100%;
          }
        }
        .userall {
          background-color: rgb(239, 239, 239);
          border-radius: 0 0 10px 10px;
          box-shadow: 0px 2px 2px 0px #dedfe0;
          .user {
            display: flex;
            padding-top: 10px;
            .userhead {
              img {
                width: 55px;
                height: 55px;
                margin-right: 10px;
              }
            }
            .username {
              p {
                &:nth-child(1) {
                  font-weight: 800;
                }
                &:nth-child(2) {
                  color: rgb(111, 112, 112);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
